<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Cousine|Inconsolata" rel="stylesheet">
	<link rel="shortcut icon" type="image/png" href="/favicon.png">

	
	<link rel="stylesheet" href="/css/style.css">
	<link rel="stylesheet" href="/css/css/fontawesome-all.min.css">
	<script src="/js/main.js"></script>
	

	<!-- Begin Jekyll SEO tag v2.1.0 -->
<title>JS: Create Account - Steem Developer</title>
<meta property="og:title" content="JS: Create Account" />
<meta name="description" content="In this tutorial we will create Steem account using Steemconnect as well as with Clientside signing method" />
<meta property="og:description" content="In this tutorial we will create Steem account using Steemconnect as well as with Clientside signing method" />
<link rel="canonical" href="https://developer.steem.io/tutorials-javascript/create_account" />
<meta property="og:url" content="https://developer.steem.io/tutorials-javascript/create_account" />
<meta property="og:site_name" content="Steem Developer" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2018-07-20T12:56:08-05:00" />
<script type="application/ld+json">
{"@context": "http://schema.org",
"@type": "BlogPosting",
"headline": "JS: Create Account",
"datePublished": "2018-07-20T12:56:08-05:00",
"description": "In this tutorial we will create Steem account using Steemconnect as well as with Clientside signing method",
"url": "https://developer.steem.io/tutorials-javascript/create_account"}</script>
<!-- End Jekyll SEO tag -->


	
</head>
<body>
<header>
	<h1>
		<button type="button" class="open-nav" id="open-nav"></button>
		<a href="/"  class="logo-link"><img src="/images/logotype_white.svg" height="40" alt="Steem Developer logo"></a>
	</h1>

	
	<form action="/search/" method="get">
		<input type="text" name="q" id="search-input" placeholder="Search">
		<input type="submit" value="Search" style="display: none;">
	</form>
	

	<div id="sidebar" class="sidebar">
	
	
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/">
		<h6 class="ctrl-nav-section title">Introduction</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/#introduction-welcome">Welcome to Steem</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/quickstart/">
		<h6 class="ctrl-nav-section title">Quickstart</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/quickstart/#quickstart-choose-library">Choose Library</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-steemd-nodes">steemd Nodes</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-testnet">Steem Testnet</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/tutorials/">
		<h6 class="ctrl-nav-section title">Tutorials</h6>
		<ul class="cont-nav-section content">
			
				
					
						<li><a href="/tutorials/#tutorials-javascript">Javascript</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-python">Python</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-ruby">Ruby</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-recipes">Recipes</a></li>
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/services/">
		<h6 class="ctrl-nav-section title">Services</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/services/#services-steemit">Steemit.com</a></li>
						
					
						
						<li><a href="/services/#services-steemconnect">SteemConnect</a></li>
						
					
						
						<li><a href="/services/#services-jussi">jussi</a></li>
						
					
						
						<li><a href="/services/#services-imagehoster">ImageHoster</a></li>
						
					
						
						<li><a href="/services/#services-sbds">SBDS</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/apidefinitions/">
		<h6 class="ctrl-nav-section title">Appbase API</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/apidefinitions/#apidefinitions-condenser-api">Condenser Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-by-key-api">Account By Key Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops-comment">Broadcast Ops Comment</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-history-api">Account History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-database-api">Database Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-follow-api">Follow Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-jsonrpc">Jsonrpc</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-market-history-api">Market History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-network-broadcast-api">Network Broadcast Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-tags-api">Tags Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-witness-api">Witness Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-block-api">Block Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops">Broadcast Ops</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/community/">
		<h6 class="ctrl-nav-section title">Community</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/community/#community-overview">Overview</a></li>
						
					
						
						<li><a href="/community/#community-resources">Resources</a></li>
						
					
						
						<li><a href="/community/#community-developeradvocate">Sharing & Help</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/glossary/">
		<h6 class="ctrl-nav-section title">Glossary</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/glossary/#glossary-chain-basics">Chain Basics</a></li>
						
					
						
					
						
						<li><a href="/glossary/#glossary-governance">Governance</a></li>
						
					
						
						<li><a href="/glossary/#glossary-transactions">Transactions</a></li>
						
					
						
						<li><a href="/glossary/#glossary-api">API</a></li>
						
					
						
						<li><a href="/glossary/#glossary-market">Market</a></li>
						
					
				
			
		</ul>
	</section>
	
</div>


	<!--<p class="copyright">-->
	<!--<a href="https://steemit.com.com/">-->
	<!--steemit-->
	<!--</a>-->
	<!--</p>-->
	<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</header>
<div class="main" id="top">
	<div class="hero">
		<h1 class="hero__h1">Steem Developer Portal </h1>
		
		<img class="hero__img" src="/images/hero.png">
		
	</div>
	<section id="tutorials-javascript-create-account" class="row tutorials-javascript-create-account">
	<h3>
		<a id="tutorials-javascript-create-account">
			JS: Create Account
			
		</a>
	</h3>
	
		<p class="description">In this tutorial we will create Steem account using Steemconnect as well as with Clientside signing method</p>
	

	<p><span class="fa-pull-left top-of-tutorial-repo-link"><span class="first-word">Full</span>, runnable src of <a href="https://github.com/steemit/devportal-tutorials-js/tree/master/tutorials/24_create_account">Create Account</a> can be downloaded as part of the <a href="https://github.com/steemit/devportal-tutorials-js">JS tutorials repository</a>.</span>
<br /></p>

<p>This tutorial runs on the main Steem blockchain. And accounts queried/searched are real accounts and creator account show have sufficient liquid balance to create new account.</p>

<h2 id="intro">Intro</h2>

<p>This tutorial will show few functions such as querying account by name and check if username is taken or available to register. We are using the <code class="highlighter-rouge">call</code> function provided by the <code class="highlighter-rouge">dsteem</code> library to pull account from the Steem blockchain. We then create proper private keys for new account. A simple HTML interface is used to enter payment of account creation fee and create account right inside tutorial.</p>

<h2 id="steps">Steps</h2>

<ol>
  <li><a href="#app-setup"><strong>App setup</strong></a> Setup <code class="highlighter-rouge">dsteem</code> to use the proper connection and network.</li>
  <li><a href="#search-account"><strong>Search account</strong></a> Get account details after input has account name</li>
  <li><a href="#generate-keys"><strong>Generate private keys</strong></a> Generate proper keys for new account</li>
  <li><a href="#create-account"><strong>Create account</strong></a> Create account via Client-side or Steemconnect</li>
</ol>

<h4 id="1-app-setup-">1. App setup <a name="app-setup"></a></h4>

<p>Below we have <code class="highlighter-rouge">dsteem</code> pointing to the production network with the proper chainId, addressPrefix, and endpoint. There is a <code class="highlighter-rouge">public/app.js</code> file which holds the Javascript segment of this tutorial. In the first few lines we define the configured library and packages:</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kr">const</span> <span class="nx">dsteem</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'dsteem'</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">opts</span> <span class="o">=</span> <span class="p">{};</span>
<span class="c1">//connect to production server</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">addressPrefix</span> <span class="o">=</span> <span class="s1">'STM'</span><span class="p">;</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">chainId</span> <span class="o">=</span>
    <span class="s1">'0000000000000000000000000000000000000000000000000000000000000000'</span><span class="p">;</span>
<span class="c1">//connect to server which is connected to the network/production</span>
<span class="kr">const</span> <span class="nx">client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">Client</span><span class="p">(</span><span class="s1">'https://api.steemit.com'</span><span class="p">);</span>
</code></pre>
</div>

<h4 id="2-search-account-">2. Search account <a name="search-account"></a></h4>

<p>After account name field is filled with some name, tutorial has Search button to search for account by name. HTML input forms can be found in the <code class="highlighter-rouge">index.html</code> file. The values are pulled from that screen with the below:</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code>    <span class="kr">const</span> <span class="nx">accSearch</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'username'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
    <span class="kd">let</span> <span class="nx">avail</span> <span class="o">=</span> <span class="s1">'Account is NOT available to register'</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">accSearch</span><span class="p">.</span><span class="nx">length</span><span class="o">&gt;</span><span class="mi">2</span><span class="p">)</span> <span class="p">{</span>
        <span class="kr">const</span> <span class="nx">_account</span> <span class="o">=</span> <span class="nx">await</span> <span class="nx">client</span><span class="p">.</span><span class="nx">database</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="s1">'get_accounts'</span><span class="p">,</span> <span class="p">[[</span><span class="nx">accSearch</span><span class="p">]]);</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="err">`</span><span class="nx">_account</span><span class="err">:`</span><span class="p">,</span> <span class="nx">_account</span><span class="p">,</span> <span class="nx">accSearch</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span>

        <span class="k">if</span> <span class="p">(</span><span class="nx">_account</span><span class="p">.</span><span class="nx">length</span><span class="o">==</span><span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">avail</span> <span class="o">=</span> <span class="s1">'Account is available to register'</span>
        <span class="p">}</span>
    <span class="p">}</span>
</code></pre>
</div>

<p>We will then do simple check if account is taken or not.</p>

<h4 id="3-generate-private-keys-">3. Generate private keys <a name="generate-keys"></a></h4>

<p>After we know that account is available to register, we will fill form with password we wish for that account and enter creation fee. Note, that creation fees are deposited into new account, if VESTS is entered it will be powered up to new account.</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kr">const</span> <span class="nx">username</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'username'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
<span class="kr">const</span> <span class="nx">password</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'password'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>

<span class="kr">const</span> <span class="nx">ownerKey</span> <span class="o">=</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">PrivateKey</span><span class="p">.</span><span class="nx">fromLogin</span><span class="p">(</span><span class="nx">username</span><span class="p">,</span> <span class="nx">password</span><span class="p">,</span> <span class="s1">'owner'</span><span class="p">);</span>
<span class="kr">const</span> <span class="nx">activeKey</span> <span class="o">=</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">PrivateKey</span><span class="p">.</span><span class="nx">fromLogin</span><span class="p">(</span><span class="nx">username</span><span class="p">,</span> <span class="nx">password</span><span class="p">,</span> <span class="s1">'active'</span><span class="p">);</span>
<span class="kr">const</span> <span class="nx">postingKey</span> <span class="o">=</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">PrivateKey</span><span class="p">.</span><span class="nx">fromLogin</span><span class="p">(</span><span class="nx">username</span><span class="p">,</span> <span class="nx">password</span><span class="p">,</span> <span class="s1">'posting'</span><span class="p">);</span>
<span class="kr">const</span> <span class="nx">memoKey</span> <span class="o">=</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">PrivateKey</span><span class="p">.</span><span class="nx">fromLogin</span><span class="p">(</span><span class="nx">username</span><span class="p">,</span> <span class="nx">password</span><span class="p">,</span> <span class="s1">'memo'</span><span class="p">);</span>

<span class="kr">const</span> <span class="nx">ownerAuth</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">weight_threshold</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
    <span class="na">account_auths</span><span class="p">:</span> <span class="p">[],</span>
    <span class="na">key_auths</span><span class="p">:</span> <span class="p">[[</span><span class="nx">ownerKey</span><span class="p">.</span><span class="nx">createPublic</span><span class="p">(),</span> <span class="mi">1</span><span class="p">]],</span>
<span class="p">};</span>
<span class="kr">const</span> <span class="nx">activeAuth</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">weight_threshold</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
    <span class="na">account_auths</span><span class="p">:</span> <span class="p">[],</span>
    <span class="na">key_auths</span><span class="p">:</span> <span class="p">[[</span><span class="nx">activeKey</span><span class="p">.</span><span class="nx">createPublic</span><span class="p">(),</span> <span class="mi">1</span><span class="p">]],</span>
<span class="p">};</span>
<span class="kr">const</span> <span class="nx">postingAuth</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">weight_threshold</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
    <span class="na">account_auths</span><span class="p">:</span> <span class="p">[],</span>
    <span class="na">key_auths</span><span class="p">:</span> <span class="p">[[</span><span class="nx">postingKey</span><span class="p">.</span><span class="nx">createPublic</span><span class="p">(),</span> <span class="mi">1</span><span class="p">]],</span>
<span class="p">};</span>
</code></pre>
</div>

<p>Above script shows, how to properly setup private keys of new account.</p>

<h4 id="4-create-account-">4. Create account <a name="create-account"></a></h4>

<p>After following all steps properly, we can now submit transaction to create new account.</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kr">const</span> <span class="nx">privateKey</span> <span class="o">=</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">PrivateKey</span><span class="p">.</span><span class="nx">fromString</span><span class="p">(</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'wif'</span><span class="p">).</span><span class="nx">value</span>
<span class="p">);</span>
<span class="kr">const</span> <span class="nx">op</span> <span class="o">=</span> <span class="p">[</span>
    <span class="s1">'account_create'</span><span class="p">,</span>
    <span class="p">{</span>
        <span class="na">creator</span><span class="p">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'account'</span><span class="p">).</span><span class="nx">value</span><span class="p">,</span>
        <span class="na">new_account_name</span><span class="p">:</span> <span class="nx">username</span><span class="p">,</span>
        <span class="na">owner</span><span class="p">:</span> <span class="nx">ownerAuth</span><span class="p">,</span>
        <span class="na">active</span><span class="p">:</span> <span class="nx">activeAuth</span><span class="p">,</span>
        <span class="na">posting</span><span class="p">:</span> <span class="nx">postingAuth</span><span class="p">,</span>
        <span class="na">memo_key</span><span class="p">:</span> <span class="nx">memoKey</span><span class="p">,</span>
        <span class="na">json_metadata</span><span class="p">:</span> <span class="s1">''</span><span class="p">,</span>
    <span class="p">},</span>
<span class="p">];</span>

<span class="nx">client</span><span class="p">.</span><span class="nx">broadcast</span><span class="p">.</span><span class="nx">sendOperations</span><span class="p">([</span><span class="nx">op</span><span class="p">],</span> <span class="nx">privateKey</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span>
    <span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'result'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s1">'block'</span><span class="p">;</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span>
            <span class="s1">'result'</span>
        <span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="err">`</span><span class="o">&lt;</span><span class="nx">br</span><span class="o">/&gt;&lt;</span><span class="nx">p</span><span class="o">&gt;</span><span class="nx">Included</span> <span class="k">in</span> <span class="nx">block</span><span class="err">:</span> <span class="nx">$</span><span class="p">{</span>
            <span class="nx">result</span><span class="p">.</span><span class="nx">block_num</span>
        <span class="p">}</span><span class="o">&lt;</span><span class="sr">/p&gt;&lt;br/</span><span class="o">&gt;&lt;</span><span class="nx">br</span><span class="o">/&gt;</span><span class="err">`</span><span class="p">;</span>
    <span class="p">},</span>
    <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">error</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">);</span>
</code></pre>
</div>

<p>Note in above creator’s account name and active private keys are used for creation.</p>

<p>That’s it!</p>

<h3 id="to-run-this-tutorial">To run this tutorial</h3>

<ol>
  <li>clone this repo</li>
  <li><code class="highlighter-rouge">cd tutorials/24_create_account</code></li>
  <li><code class="highlighter-rouge">npm i</code></li>
  <li><code class="highlighter-rouge">npm run dev-server</code> or <code class="highlighter-rouge">npm run start</code></li>
  <li>After a few moments, the server should be running at <a href="http://localhost:3000/">http://localhost:3000/</a></li>
</ol>

<hr />

</section>

</div>
<div class="footer">
	<a href="#">Back to top</a>
</div>
<script>
    document.getElementById("open-nav").addEventListener("click", function () {
        document.body.classList.toggle("nav-open");
    });
</script>
</body>
</html>


<script src="/js/adjust.js"></script>

